Files from in class today
[file] imagereplacement.zip
[file] sifr_inclass.zip
Today we have a number of things on the Agenda.
Regarding the Midterm projects. The grading is not complete yet and not all of them have been turned in. You should have your grades and my feedback next week. One of the reasons outside of late arrivals that the midterms take me a while to grade is that I try to provide a lot of feedback on them that you will be able to use to help with your final project.
FINAL PROJECT
Speaking of the final project, I generally do not give feedback on that because it’s just a rush to get the grades turned in and I find you all are busy as well. We are going to talk briefly about the final project today with a full requirements document next week.
The final project is due on Monday, May 24, 2010. Because grades are due so soon after you must turn in your project on that day and present it in class. The presentation is part of the grade. There is no room for error here like with the midterm.
There are two options for the final project.
Option 1:Multimedia Alumni Site
Create a site for BMCC Multimedia program alumni. If you choose this option I will help out with the content. But you will still have to make some on your own. I will also require certain pages. It will include information such as: Welcome, Benefits, Photo Gallery, Contact Form, News, Profiles, Events.
I will give you most of the content but I also want you to be able to come up with and implement ideas of your own as well.
If you don’t turn in your Final proposal on time (it will be due in two weeks on May 3) then you MUST use this option.
Option 2 create your own site.
The main requirement in terms of content is that the site is about an organization that you have some connection to. It could be a formal or informal organization such as a school group, business, church, sports team etc. But it has to be real and you have to have a connection to it.
Preferably the organization will be able to help you with getting the content for the site. If the group is somewhat private you should contact them and let them know what you’re planning to do and make sure it’s OK: especially related to things like pictures or contact information. If the group already has a website and you plan on redesigning it then let me know that.
—–
Regardless of which option you choose your final project will have to include:
- 8 pages (including home and search results)
- Dreamweaver Templates (or something authorized by me)
- Valid, semantic HTML
- valid, cross browser CSS
- Content that follows the guidelines, makes sense and is free of typos and grammar errors.
- Search
- Maps
- Calendar
- Form (the form will not have to work but you must style it)
Three Column Recap
There was homework due today. We will talk briefly about three column layout and answer questions.
Typography
We are going to cover a couple of techniques for putting uncommon fonts into your designs. One of the issues with normal HTML text is that the user has to have the font you specify in CSS on their computer. One way of dealing with this is through the use of font stacks. Another is through Image Replacement and the last one we will look at is SIFR (Scaleable Inman Flash Replacement). Something to remember is that all of these techniques are based on solid HTML in the first place. You should have proper HTML elements for your content first and then build on that with what we will learn next.
Font Stacks
This is built into CSS and requires the least work of all the techniques. You can carefully choose a number of fonts starting with the one you would like most and going down through various alternatives. The only problem with this technique is that it means the site will look different for different people (although this is one of the things you have to live with when doing web design) and sometimes it’s hard to find a similar font to the one you really want. Because this is relatively easy and a part of CSS you can use it for all of the fonts for your site.
There are a lot of resources to help you choose font stacks and work with typography in general on the Typography page on this blog: http://mmp240_spring2010.blogs.peopleio.net/resources/typography/
Important NOTE: For your final project you MUST use the Font Stack. The other two techniques we will cover should be in addition to the font stack.
Image Replacement
This technique should only be used for titles (h1..h6 elements basically); it should not be used for the body text. In this technique you start with the normal element like h1. This element should have the title written inside of it. There are a number of versions of the technique but they all involve some of the same basic things:
- In a program like Photoshop you create an image of the title you want in the font you want. Each title will need a separate image.
- You use CSS to make the text in the title element not visible and
- you add in the image of the title as a background image.
Dave Shea, an expert an author on CSS and Web Design, has complied a list of some of the techniques on his website. Here is the link to the list
http://mezzoblue.com/tests/revised-image-replacement/
We will do two of these methods in class: Phark Revised and Gilder/Levin Method.
To make it easier I have created some files we will use that already have the HTML: ir_example.zip
SIFR
This technique should only be used for titles (h1..h6 elements basically); it should not be used for the body text.
This technique is different than image replacement. In some ways it is easier, others more difficult. It is easier because basically what it does is use a combination of Javascript and Flash to read the HTML text you have and replace it with a flash file that has the same text but in the font and color you want. So you don’t have to make an image for each title like with image replacement.
Here are some difficulties:
The user must have BOTH JavaScript enabled and the Flash plugin. So thus does not work with devices like say the iPhone – that is also why you still need to specify a font stack.
You have to learn the process for creating the Flash files and modify a bit of JavaScript code (thus isn’t too bad and we will learn it in class today).
This page is from the person who developed the technique:
http://www.mikeindustries.com/blog/sifr/
And some documentation we will look at is here:
http://wiki.novemberborn.net/sifr/How+to+use
and an interactive example is here:
http://www.mikeindustries.com/blog/files/sifr/2.0/
Thus page is a tutorial I made on how to use the technique:
http://www.teachingmultimedia.com/mmp240/imagereplacement/sIFR_stepbystep.html
Here are the JavaScript and Flash and HTML files you will need to try it out. There are two downloads, one is for the files needed to create sIFR and the other is an example.
sifr_example.zip
sifr_download
Homework:
There are two assignments. One won’t take a lot of work but will. Require thought and the other is a practical application of the typography we covered.
Assignment #9: Final Project topic.
Decide what your final project topic is going to be and send me an email with it.
Assignment #10: Typography Style Guide
Download the following HTML file and create a CSS file for it following the instructions written in the HTML file.
basic_styleguide.html
To turn it in upload your work to the mmp server and paste the URL into assignment 9 in blackboard.
Christopher Stein